<%@ page import="com.ciquan.server.util.web.BasePathUtil" %>
<%--
  Created by IntelliJ IDEA.
  User: kakalee
  Date: 15/1/24
  Time: 14:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<jsp:include page="header.jsp"></jsp:include>
<style>
    .col-xs-6 {
        height: 500px;
    }

    .form {
        text-align: right;
        line-height: 34px;
        padding-bottom: 30px;
        margin-bottom: 10px;
        border-bottom: 1px solid #aaa;
    }
</style>

<script>
    $(document).ready(function() {
        Highcharts.setOptions( { global : { useUTC : false } });
        $('#container1').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '访客数'
            },
            subtitle: {
                text: '每天访客数'
            },
            xAxis: {
                title: {
                    text: '天'
                },
                min: 1,
                minTickInterval: 1
            },
            yAxis: {
                title: {
                    text: '数量'
                },
                min: 0,
                minTickInterval: 1
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name + '-' + (this.x > 10 ? '' : '0') + this.x + '</b>: ' + this.y +' 人';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: '${date1}',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${status.index + 1},${businessStatus.userCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
                },{
                    name: '${date2}',
                    data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                        [${status.index + 1},${businessStatus.userCount}]
                        <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                        ,
                        </c:if>
                        </c:forEach>]
                }
            ],
            credits: {
                enabled: false
            }
        });


        $('#container2').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '销售额'
            },
            subtitle: {
                text: '每天销售额'
            },
            xAxis: {
                title: {
                    text: '天'
                },
                min: 1,
                minTickInterval: 1
            },
            yAxis: {
                title: {
                    text: '销售额'
                },
                labels: {
                    format: '{value:.,0f}'
                },
                min:0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name + '-' + (this.x > 10 ? '' : '0') + this.x + '</b>: ' + this.y +' 元';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: '${date1}',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${status.index + 1},${businessStatus.orderAmount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '${date2}',
                data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                    [${status.index + 1},${businessStatus.orderAmount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            }
            ],
            credits: {
                enabled: false
            }
        });

        $('#container3').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '客户数'
            },
            subtitle: {
                text: '每天客户数'
            },
            xAxis: {
                title: {
                    text: '天'
                },
                min: 1,
                minTickInterval: 1
            },
            yAxis: {
                title: {
                    text: '客户数'
                },
                min:0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name + '-' + (this.x > 10 ? '' : '0') + this.x + '</b>: ' + this.y +' 人';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'PC端',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${status.index + 1},${businessStatus.orderUserCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '移动端',
                data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                    [${status.index + 1},${businessStatus.orderUserCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            }
            ],
            credits: {
                enabled: false
            }
        });
        $('#container4').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '客单价'
            },
            subtitle: {
                text: '每天客单价'
            },
            xAxis: {
                title: {
                    text: '天'
                },
                min: 1,
                minTickInterval: 1
            },
            yAxis: {
                title: {
                    text: '客单价'
                },
                labels: {
                    format: '{value:.,0f}'
                },
                min:0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br>'+
                            Highcharts.dateFormat('%Y-%m-%d', this.x) +': '+ this.y +' 元';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: '${date1}',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${status.index + 1},${businessStatus.orderAmount / businessStatus.orderUserCount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '${date2}',
                data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                    [${status.index + 1},${businessStatus.orderAmount / businessStatus.orderUserCount / 100}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            }
            ],
            credits: {
                enabled: false
            }
        });
        $('#container5').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '转化率'
            },
            subtitle: {
                text: '每天转化率'
            },
            xAxis: {
                title: {
                    text: '天'
                },
                min: 1,
                minTickInterval: 1
            },
            yAxis: {
                title: {
                    text: '转化率'
                },
                labels: {
                    format: '{value:.,0f}%'
                },
                min:0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name + '-' + (this.x > 10 ? '' : '0') + this.x + '</b>: ' + this.y +' %';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: '${date1}',
                data: [<c:forEach items="${businessStatuses1}" var="businessStatus" varStatus="status">
                    [${status.index + 1},${businessStatus.orderUserCount * 100 / businessStatus.userCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            },{
                name: '${date2}',
                data: [<c:forEach items="${businessStatuses2}" var="businessStatus" varStatus="status">
                    [${status.index + 1},${businessStatus.orderUserCount * 100 / businessStatus.userCount}]
                    <c:if test="${status.index < fn:length(businessStatuses1) - 1}">
                    ,
                    </c:if>
                    </c:forEach>]
            }
            ],
            credits: {
                enabled: false
            }
        });

        $('.date').datepicker({
            format:'yyyy-mm',
            startView:1,
            minViewMode:1,
            language: "zh-CN",
            autoclose: true
        });
    });
</script>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="row form">
        <form action="/businessCompare/list" method="get">
            <div class="form-group form-group-sm">
                <label class="control-label col-xs-1">时间1：</label>
                <div class="col-xs-2">
                    <input type="text" class="form-control date" name="date1" value="${date1}">
                </div>

                <label class="control-label col-xs-1">时间2：</label>
                <div class="col-xs-2">
                    <input type="text" class="form-control date" name="date2" value="${date2}">
                </div>

                <div class="col-xs-2">
                    <input type="submit" class="btn btn-danger" value="提交">
                </div>
            </div>
        </form>
    </div>
    <div class="col-xs-6" id="container1"></div>
    <div class="col-xs-6" id="container2"></div>
    <div class="col-xs-6" id="container3"></div>
    <div class="col-xs-6" id="container4"></div>
    <div class="col-xs-6" id="container5"></div>
</div>



</div>
</body>
</html>
